<script setup lang="ts">
import type { IOrder } from '@/api/interface/rescue/order/order'
import type { IProduct } from '@/api/interface/rescue/product/product'
import { onLoad } from '@dcloudio/uni-app'
import { computed, onMounted, ref } from 'vue'
import { createOrderApi } from '@/api/modules/rescue/order/order'
import { getProductSelectApi } from '@/api/modules/rescue/product/product'
// 组件会通过全局注册或者自动导入的方式使用，无需显式导入

// 页面状态
const loading = ref(false)
const loadingMore = ref(false)
const submitting = ref(false)
const hasMore = ref(true)
const currentStep = ref(0)
const showProductDetail = ref(false)

const showSelectedItems = ref(false)

// 新增：删除确认弹窗状态
const showDeleteConfirm = ref(false)
const deleteItemIndex = ref(-1)

// 新增：数量编辑状态
const editingQuantity = ref(false)
const editingItemIndex = ref(-1)
const tempQuantity = ref(1)

// 步骤配置
const steps = [
  { title: '选择物资', subtitle: '筛选和选择需要的物资' },
  { title: '确认数量', subtitle: '确认物资数量和规格' },
  { title: '填写信息', subtitle: '完善订单信息并提交' },
]

// 筛选参数
const filterParams = ref({
  warehouseId: undefined as number | undefined,
  tagIds: [] as number[],
  searchType: 'name' as string,
  searchText: '',
  productName: '',
  productNumber: '',
})

// 分页参数
const pageParams = ref({
  page: 1,
  limit: 10,
})

// 数据状态
const productList = ref<IProduct.ProductSelectVO[]>([])
const selectedProduct = ref<IProduct.ProductSelectVO | null>(null)
const cartItems = ref<IProduct.CartItem[]>([])

// 订单表单
const orderForm = ref<IOrder.OrderFormData>({
  workNumber: '',
  reason: '',
  remark: '',
})

// 计算属性
const totalQuantity = computed(() => {
  return cartItems.value.reduce((sum, item) => sum + item.quantity, 0)
})

const totalAmount = computed(() => {
  return cartItems.value.reduce((sum, item) => sum + item.totalPrice, 0).toFixed(2)
})

// 事件处理（现在由 MaterialsFilter 组件处理）

function handleSearch() {
  pageParams.value.page = 1
  hasMore.value = true
  productList.value = []
  loadProducts()
}

function resetFilter() {
  filterParams.value = {
    warehouseId: undefined,
    tagIds: [],
    searchType: 'name',
    searchText: '',
    productName: '',
    productNumber: '',
  }
  handleSearch()
}

function handleProductClick(product: IProduct.ProductSelectVO) {
  selectedProduct.value = product
  showProductDetail.value = true
}

function addToCart(sku: IProduct.ProductSku) {
  if (sku.stock === 0) {
    uni.showToast({
      title: '该规格缺货',
      icon: 'none',
    })
    return
  }

  const existingIndex = cartItems.value.findIndex((item) => item.skuId === sku.id)

  if (existingIndex >= 0) {
    // 已存在，增加数量
    const existingItem = cartItems.value[existingIndex]
    if (existingItem.quantity < sku.stock) {
      existingItem.quantity += 1
      existingItem.totalPrice = existingItem.price * existingItem.quantity
    } else {
      uni.showToast({
        title: '库存不足',
        icon: 'none',
      })
      return
    }
  } else {
    // 新增
    if (!selectedProduct.value) return

    const cartItem: IProduct.CartItem = {
      skuId: sku.id,
      skuName: sku.name,
      productId: selectedProduct.value.id,
      productName: selectedProduct.value.name,
      productNumber: selectedProduct.value.productNumber,
      image: sku.image || selectedProduct.value.image,
      price: sku.price,
      quantity: 1,
      stock: sku.stock,
      totalPrice: sku.price,
    }
    cartItems.value.push(cartItem)
  }

  uni.showToast({
    title: '已添加到购物车',
    icon: 'success',
  })
}

function updateQuantity(index: number, newQuantity: number) {
  if (newQuantity < 1) {
    removeCartItem(index)
    return
  }

  const item = cartItems.value[index]
  if (newQuantity > item.stock) {
    uni.showToast({
      title: '库存不足',
      icon: 'none',
    })
    return
  }

  item.quantity = newQuantity
  item.totalPrice = item.price * newQuantity
}

function removeCartItem(index: number) {
  cartItems.value.splice(index, 1)
}

// 新增：显示删除确认弹窗
function showDeleteConfirmDialog(index: number) {
  deleteItemIndex.value = index
  showDeleteConfirm.value = true
}

// 新增：确认删除物资
function confirmDeleteItem() {
  if (deleteItemIndex.value >= 0) {
    cartItems.value.splice(deleteItemIndex.value, 1)
    showDeleteConfirm.value = false
    deleteItemIndex.value = -1

    uni.showToast({
      title: '已删除物资',
      icon: 'success',
    })
  }
}

// 新增：取消删除
function cancelDeleteItem() {
  showDeleteConfirm.value = false
  deleteItemIndex.value = -1
}

// 新增：开始编辑数量
function startEditQuantity(index: number) {
  editingItemIndex.value = index
  tempQuantity.value = cartItems.value[index].quantity
  editingQuantity.value = true

  // 延迟获取焦点和选中文本
  setTimeout(() => {
    const input = document.querySelector('.quantity-input input') as HTMLInputElement
    if (input) {
      input.focus()
      input.select()
    }
  }, 100)
}

// 新增：确认修改数量
function confirmEditQuantity() {
  if (editingItemIndex.value >= 0 && tempQuantity.value > 0) {
    const item = cartItems.value[editingItemIndex.value]

    if (tempQuantity.value > item.stock) {
      uni.showToast({
        title: '库存不足',
        icon: 'none',
      })
      return
    }

    item.quantity = tempQuantity.value
    item.totalPrice = item.price * tempQuantity.value

    editingQuantity.value = false
    editingItemIndex.value = -1

    uni.showToast({
      title: '数量已更新',
      icon: 'success',
    })
  }
}

// 新增：取消编辑数量
function cancelEditQuantity() {
  editingQuantity.value = false
  editingItemIndex.value = -1
  tempQuantity.value = 1
}

// 新增：验证数量输入
function validateQuantity() {
  // 确保数量为正整数
  if (tempQuantity.value < 1) {
    tempQuantity.value = 1
  }

  // 确保数量不超过库存
  if (editingItemIndex.value >= 0) {
    const item = cartItems.value[editingItemIndex.value]
    if (tempQuantity.value > item.stock) {
      // 在这里不自动限制数量，只是提示用户
      // 让用户自己决定是否要修改
    }
  }
}

function goToStep(step: number) {
  // 关闭所有弹窗
  showProductDetail.value = false
  showSelectedItems.value = false
  showDeleteConfirm.value = false
  editingQuantity.value = false

  currentStep.value = step
}

async function loadProducts() {
  if (loading.value) return

  loading.value = true
  try {
    const params: IProduct.ProductListDTO = {
      page: pageParams.value.page,
      limit: pageParams.value.limit,
    }

    if (filterParams.value.warehouseId) {
      params.warehouseId = filterParams.value.warehouseId
    }
    if (filterParams.value.tagIds.length > 0) {
      params.tagIds = filterParams.value.tagIds
    }
    if (filterParams.value.productName) {
      params.name = filterParams.value.productName
    }
    if (filterParams.value.productNumber) {
      params.productNumber = filterParams.value.productNumber
    }

    const res = await getProductSelectApi(params)

    if (pageParams.value.page === 1) {
      productList.value = res.data.rows
    } else {
      productList.value.push(...res.data.rows)
    }

    hasMore.value = productList.value.length < res.data.total
  } catch (error) {
    console.error('加载产品失败:', error)
    uni.showToast({
      title: '加载失败',
      icon: 'none',
    })
  } finally {
    loading.value = false
  }
}

async function loadMoreProducts() {
  if (loadingMore.value || !hasMore.value) return

  loadingMore.value = true
  pageParams.value.page++
  await loadProducts()
  loadingMore.value = false
}

async function submitOrder() {
  if (!orderForm.value.reason) {
    uni.showToast({
      title: '请输入操作原因',
      icon: 'none',
    })
    return
  }

  if (cartItems.value.length === 0) {
    uni.showToast({
      title: '请选择物资',
      icon: 'none',
    })
    return
  }

  submitting.value = true
  try {
    const orderData: IOrder.OrderCreateDTO = {
      workNumber: orderForm.value.workNumber,
      type: 'APPLY',
      reason: orderForm.value.reason,
      remark: orderForm.value.remark,
      skuQuantityList: cartItems.value.map((item) => ({
        skuId: item.skuId,
        quantity: item.quantity,
      })),
    }

    await createOrderApi(orderData)

    uni.showToast({
      title: '申请提交成功',
      icon: 'success',
    })

    // 延迟返回物资页面
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  } catch (error) {
    console.error('提交订单失败:', error)
    uni.showToast({
      title: '提交失败',
      icon: 'none',
    })
  } finally {
    submitting.value = false
  }
}

onLoad(() => {
  loadProducts()
})
</script>

<template>
  <view class="material-apply-page">
    <!-- 步骤导航 -->
    <view class="step-navigator">
      <view class="step-container">
        <view
          v-for="(step, index) in steps"
          :key="index"
          class="step-item"
          :class="{ active: currentStep === index, completed: index < currentStep }"
        >
          <view class="step-circle">
            <text v-if="index < currentStep" class="step-check">✓</text>
            <text v-else class="step-number">
              {{ index + 1 }}
            </text>
          </view>
          <text class="step-title">
            {{ step.title }}
          </text>
        </view>
      </view>
    </view>

    <!-- 步骤内容 -->
    <view class="step-content">
      <!-- 第一步：物资选择 -->
      <view v-if="currentStep === 0" class="step-panel">
        <view class="panel-header">
          <text class="panel-title">选择物资</text>
          <text class="panel-subtitle">通过筛选条件查找并选择需要的物资</text>
        </view>

        <!-- 筛选条件 -->
        <MaterialsFilter
          v-model="filterParams"
          :default-expanded="true"
          @search="handleSearch"
          @reset="resetFilter"
        />

        <!-- 物资列表 -->
        <view class="product-list">
          <view v-if="loading" class="loading-container">
            <wd-loading size="24px" />
            <text class="loading-text">加载中...</text>
          </view>

          <view v-else-if="productList.length === 0" class="empty-state">
            <wd-icon name="package" size="48px" color="#C7C7CC" />
            <text class="empty-text">暂无物资数据</text>
            <text class="empty-subtitle">请尝试调整筛选条件</text>
          </view>

          <view v-else class="product-list-container">
            <view
              v-for="product in productList"
              :key="product.id"
              class="product-card"
              @click="handleProductClick(product)"
            >
              <view class="product-image">
                <image
                  v-if="product.image"
                  :src="product.image"
                  mode="aspectFill"
                  class="product-img"
                />
                <view v-else class="product-placeholder">
                  <wd-icon name="package" size="32px" color="#C7C7CC" />
                </view>
              </view>
              <view class="product-info">
                <text class="product-name">
                  {{ product.name }}
                </text>
                <text class="product-number">编号: {{ product.productNumber }}</text>
                <view class="product-status">
                  <text class="status-text">{{ product.productSkus.length }} 个规格可选</text>
                  <wd-icon name="arrow-right" size="14px" color="#8E8E93" />
                </view>
              </view>
            </view>
          </view>

          <!-- 加载更多 -->
          <view v-if="hasMore" class="load-more-container">
            <view
              class="load-more-button"
              :class="{ loading: loadingMore }"
              @click="loadMoreProducts"
            >
              <wd-loading v-if="loadingMore" size="16px" color="#007AFF" />
              <wd-icon v-else name="arrow-down" size="16px" color="#007AFF" />
              <text class="load-more-text">
                {{ loadingMore ? '加载中...' : '点击加载更多' }}
              </text>
            </view>
          </view>
        </view>

        <!-- 已选物资栏 -->
        <view class="selected-items-bar">
          <view class="selected-items-left" @click="showSelectedItems = true">
            <wd-icon name="shopping-cart" size="20px" color="#007AFF" />
            <text class="selected-items-text">
              {{ cartItems.length === 0 ? '未选物资' : `已选 ${cartItems.length} 件` }}
            </text>
            <view v-if="cartItems.length > 0" class="selected-items-badge">
              {{ cartItems.length }}
            </view>
          </view>
          <wd-button
            type="primary"
            size="large"
            class="next-step-button"
            :disabled="cartItems.length === 0"
            @click="goToStep(1)"
          >
            下一步
          </wd-button>
        </view>
      </view>

      <!-- 第二步：购物车确认 -->
      <view v-if="currentStep === 1" class="step-panel">
        <view class="panel-header">
          <text class="panel-title">确认物资</text>
          <text class="panel-subtitle">确认选择的物资数量和规格</text>
        </view>

        <view class="cart-list">
          <view v-if="cartItems.length === 0" class="empty-cart">
            <wd-icon name="shopping-cart" size="48px" color="#C7C7CC" />
            <text class="empty-text">购物车为空</text>
            <wd-button type="text" @click="goToStep(0)">去选择物资</wd-button>
          </view>

          <view v-else>
            <view v-for="(item, index) in cartItems" :key="item.skuId" class="cart-item">
              <view class="cart-item-image">
                <image v-if="item.image" :src="item.image" mode="aspectFill" class="item-img" />
                <view v-else class="item-placeholder">
                  <wd-icon name="package" size="24px" color="#C7C7CC" />
                </view>
              </view>
              <view class="cart-item-info">
                <text class="item-name">
                  {{ item.productName }}
                </text>
                <text class="item-sku">
                  {{ item.skuName }}
                </text>
                <view class="item-number-row">
                  <text class="item-number">{{ item.productNumber }}</text>
                </view>
                <view class="item-price">
                  <text class="price-label">单价:</text>
                  <text class="price-value">¥{{ item.price }}</text>
                </view>
              </view>
              <view class="cart-item-actions">
                <view class="quantity-controls">
                  <wd-button
                    type="text"
                    size="small"
                    class="quantity-btn"
                    @click="updateQuantity(index, item.quantity - 1)"
                  >
                    -
                  </wd-button>
                  <view class="quantity-display" @click="startEditQuantity(index)">
                    <text class="quantity-text">
                      {{ item.quantity }}
                    </text>
                  </view>
                  <wd-button
                    type="text"
                    size="small"
                    class="quantity-btn"
                    @click="updateQuantity(index, item.quantity + 1)"
                  >
                    +
                  </wd-button>
                </view>
                <view class="item-total">
                  <text class="total-label">小计:</text>
                  <text class="total-value">¥{{ item.totalPrice }}</text>
                </view>
                <wd-button
                  type="text"
                  size="small"
                  class="remove-btn"
                  @click="showDeleteConfirmDialog(index)"
                >
                  <wd-icon name="delete" size="16px" color="#FF3B30" />
                </wd-button>
              </view>
            </view>
          </view>
        </view>

        <!-- 总计 -->
        <view v-if="cartItems.length > 0" class="cart-summary">
          <view class="summary-row">
            <text class="summary-label">总计数量:</text>
            <text class="summary-value">{{ totalQuantity }} 件</text>
          </view>
          <view class="summary-row">
            <text class="summary-label">总计金额:</text>
            <text class="summary-value total-amount">¥{{ totalAmount }}</text>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="step-actions">
          <wd-button type="default" size="large" class="step-button" @click="goToStep(0)">
            返回选择
          </wd-button>
          <wd-button
            type="primary"
            size="large"
            class="step-button"
            :disabled="cartItems.length === 0"
            @click="goToStep(2)"
          >
            下一步
          </wd-button>
        </view>
      </view>

      <!-- 第三步：订单信息 -->
      <view v-if="currentStep === 2" class="step-panel">
        <view class="panel-header">
          <text class="panel-title">填写订单信息</text>
          <text class="panel-subtitle">完善订单信息并提交申请</text>
        </view>

        <!-- 已选物资概览 -->
        <view class="selected-summary">
          <view class="summary-header">
            <text class="summary-title">已选物资</text>
            <text class="summary-count">{{ cartItems.length }} 类物资</text>
          </view>
          <view class="summary-items">
            <view v-for="item in cartItems" :key="item.skuId" class="summary-item">
              <text class="summary-item-name">
                {{ item.productName }}
              </text>
              <text class="summary-item-sku">
                {{ item.skuName }}
              </text>
              <text class="summary-item-quantity">× {{ item.quantity }}</text>
            </view>
          </view>
        </view>

        <!-- 订单表单 -->
        <view class="order-form">
          <view class="form-section">
            <view class="form-item">
              <text class="form-label">任务编号</text>
              <wd-input
                v-model="orderForm.workNumber"
                placeholder="请输入任务编号（可选）"
                clearable
              />
            </view>
            <view class="form-item">
              <text class="form-label required">操作原因</text>
              <wd-textarea
                v-model="orderForm.reason"
                placeholder="请输入操作原因"
                :rows="3"
                clearable
              />
            </view>
            <view class="form-item">
              <text class="form-label">备注</text>
              <wd-textarea
                v-model="orderForm.remark"
                placeholder="请输入备注信息（可选）"
                :rows="3"
                clearable
              />
            </view>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="step-actions">
          <wd-button type="default" size="large" class="step-button" @click="goToStep(1)">
            上一步
          </wd-button>
          <wd-button
            type="primary"
            size="large"
            class="step-button"
            :loading="submitting"
            :disabled="!orderForm.reason"
            @click="submitOrder"
          >
            {{ submitting ? '提交中...' : '提交申请' }}
          </wd-button>
        </view>
      </view>
    </view>

    <!-- 产品详情弹窗 -->
    <wd-popup
      v-model="showProductDetail"
      position="bottom"
      :close-on-click-modal="true"
      class="product-detail-popup"
    >
      <view v-if="selectedProduct" class="product-detail">
        <view class="detail-header">
          <text class="detail-title">
            {{ selectedProduct.name }}
          </text>
          <wd-button type="text" size="small" @click="showProductDetail = false">
            <wd-icon name="close" size="20px" />
          </wd-button>
        </view>

        <view class="detail-content">
          <view class="detail-info">
            <text class="detail-number">物资编号: {{ selectedProduct.productNumber }}</text>
            <view class="detail-image">
              <image
                v-if="selectedProduct.image"
                :src="selectedProduct.image"
                mode="aspectFill"
                class="detail-img"
              />
              <view v-else class="detail-img-placeholder">
                <wd-icon name="package" size="48px" color="#C7C7CC" />
                <text class="placeholder-text">暂无图片</text>
              </view>
            </view>
          </view>

          <view class="detail-skus">
            <text class="skus-title">选择规格</text>
            <view class="skus-grid">
              <view
                v-for="sku in selectedProduct.productSkus"
                :key="sku.id"
                class="sku-card"
                :class="{ disabled: sku.stock === 0 }"
                @click="addToCart(sku)"
              >
                <view class="sku-image">
                  <image v-if="sku.image" :src="sku.image" mode="aspectFill" class="sku-img" />
                  <view v-else class="sku-img-placeholder">
                    <wd-icon name="package" size="20px" color="#C7C7CC" />
                  </view>
                </view>
                <view class="sku-info">
                  <text class="sku-name">
                    {{ sku.name }}
                  </text>
                  <text class="sku-price">¥{{ sku.price }}</text>
                  <text class="sku-stock">
                    {{ sku.stock > 0 ? `库存: ${sku.stock}` : '缺货' }}
                  </text>
                </view>
                <view v-if="sku.stock > 0" class="sku-action">
                  <wd-icon name="add-circle" size="20px" color="#007AFF" />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </wd-popup>

    <!-- 已选物资弹窗 -->
    <wd-popup
      v-model="showSelectedItems"
      position="bottom"
      :close-on-click-modal="true"
      class="selected-items-popup"
    >
      <view class="selected-items-detail">
        <view class="detail-header">
          <text class="detail-title">已选物资</text>
          <wd-button type="text" size="small" @click="showSelectedItems = false">
            <wd-icon name="close" size="20px" />
          </wd-button>
        </view>

        <view class="selected-items-content">
          <view v-if="cartItems.length === 0" class="empty-selected">
            <wd-icon name="shopping-cart" size="48px" color="#C7C7CC" />
            <text class="empty-text">还没有选择物资</text>
            <text class="empty-subtitle">请先选择需要的物资</text>
          </view>

          <view v-else class="selected-items-list">
            <view v-for="item in cartItems" :key="item.skuId" class="selected-item">
              <view class="selected-item-image">
                <image v-if="item.image" :src="item.image" mode="aspectFill" class="item-img" />
                <view v-else class="item-placeholder">
                  <wd-icon name="package" size="20px" color="#C7C7CC" />
                </view>
              </view>
              <view class="selected-item-info">
                <text class="item-name">
                  {{ item.productName }}
                </text>
                <text class="item-sku">
                  {{ item.skuName }}
                </text>
                <text class="item-quantity">数量: {{ item.quantity }}</text>
              </view>
              <view class="selected-item-price">
                <text class="price-text">¥{{ item.totalPrice }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </wd-popup>

    <!-- 删除确认弹窗 -->
    <wd-popup
      v-model="showDeleteConfirm"
      position="center"
      :close-on-click-modal="false"
      class="delete-confirm-popup"
    >
      <view class="delete-confirm-content">
        <view class="delete-confirm-header">
          <wd-icon name="delete" size="48px" color="#FF3B30" />
          <text class="delete-confirm-title">删除物资</text>
          <view v-if="deleteItemIndex >= 0" class="delete-item-info">
            <text class="delete-item-name">{{ cartItems[deleteItemIndex]?.productName }}</text>
            <text class="delete-item-sku">{{ cartItems[deleteItemIndex]?.skuName }}</text>
          </view>
          <text class="delete-confirm-text">确定要删除该物资吗？此操作不可撤销。</text>
        </view>
        <view class="delete-confirm-actions">
          <wd-button
            type="text"
            size="large"
            class="delete-confirm-button cancel-button"
            @click="cancelDeleteItem"
          >
            取消
          </wd-button>
          <wd-button
            type="text"
            size="large"
            class="delete-confirm-button confirm-button"
            @click="confirmDeleteItem"
          >
            删除
          </wd-button>
        </view>
      </view>
    </wd-popup>

    <!-- 数量编辑弹窗 -->
    <wd-popup
      v-model="editingQuantity"
      position="center"
      :close-on-click-modal="false"
      class="quantity-edit-popup"
    >
      <view class="quantity-edit-content">
        <view class="quantity-edit-header">
          <text class="quantity-edit-title">修改数量</text>
          <text class="quantity-edit-subtitle">请输入新的数量</text>
        </view>
        <view class="quantity-edit-input-section">
          <wd-input
            v-model="tempQuantity"
            type="number"
            placeholder="请输入数量"
            class="quantity-input"
            :class="{
              'invalid-quantity': tempQuantity > (cartItems[editingItemIndex]?.stock || 0),
            }"
            @confirm="confirmEditQuantity"
            @input="validateQuantity"
          />
          <view v-if="editingItemIndex >= 0" class="stock-hint">
            <text class="stock-text">库存: {{ cartItems[editingItemIndex]?.stock || 0 }}</text>
          </view>
          <view v-if="tempQuantity > (cartItems[editingItemIndex]?.stock || 0)" class="error-hint">
            <text class="error-text">数量不能超过库存</text>
          </view>
        </view>
        <view class="quantity-edit-actions">
          <wd-button
            type="text"
            size="large"
            class="quantity-edit-button cancel-button"
            @click="cancelEditQuantity"
          >
            取消
          </wd-button>
          <wd-button
            type="text"
            size="large"
            class="quantity-edit-button confirm-button"
            :disabled="tempQuantity > (cartItems[editingItemIndex]?.stock || 0) || tempQuantity < 1"
            @click="confirmEditQuantity"
          >
            确定
          </wd-button>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<style scoped lang="scss">
// Apple设计系统变量
$system-blue: #007aff;
$system-green: #34c759;
$system-red: #ff3b30;
$system-gray: #8e8e93;
$system-gray-light: #c7c7cc;
$system-gray-dark: #48484a;
$background-primary: #ffffff;
$background-secondary: #f2f2f7;
$label-primary: #000000;
$label-secondary: rgba(60, 60, 67, 0.6);
$separator: rgba(60, 60, 67, 0.36);

.material-apply-page {
  min-height: 100vh;
  background: $background-secondary;
}

// 步骤导航
.step-navigator {
  background: $background-primary;
  padding: 20px;
  border-bottom: 0.5px solid $separator;

  .step-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 20px;
      left: 20px;
      right: 20px;
      height: 2px;
      background: $system-gray-light;
      z-index: 1;
    }

    .step-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      position: relative;
      z-index: 2;

      &.active {
        .step-circle {
          background: $system-blue;
          border-color: $system-blue;
          color: white;
        }
        .step-title {
          color: $system-blue;
          font-weight: 600;
        }
      }

      &.completed {
        .step-circle {
          background: $system-green;
          border-color: $system-green;
          color: white;
        }
        .step-title {
          color: $system-green;
        }
      }

      .step-circle {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        border: 2px solid $system-gray-light;
        background: $background-primary;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        font-size: 16px;
        font-weight: 600;
        color: $system-gray;
        transition: all 0.3s ease;

        .step-check {
          font-size: 14px;
          font-weight: bold;
        }
      }

      .step-title {
        font-size: 12px;
        color: $label-secondary;
        text-align: center;
        transition: all 0.3s ease;
      }
    }
  }
}

// 步骤内容
.step-content {
  flex: 1;
  padding: 20px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 100px);
}

.step-panel {
  .panel-header {
    margin-bottom: 24px;
    text-align: center;

    .panel-title {
      display: block;
      font-size: 24px;
      font-weight: 700;
      color: $label-primary;
      margin-bottom: 8px;
    }

    .panel-subtitle {
      font-size: 14px;
      color: $label-secondary;
    }
  }
}

// 筛选区域样式已移动到 MaterialsFilter 组件中

// 产品列表
.product-list {
  .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;

    .loading-text {
      margin-top: 12px;
      font-size: 14px;
      color: $label-secondary;
    }
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;

    .empty-text {
      font-size: 16px;
      color: $label-secondary;
      margin-top: 16px;
    }

    .empty-subtitle {
      font-size: 14px;
      color: $label-secondary;
      margin-top: 8px;
    }
  }

  .product-list-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;

    .product-card {
      background: $background-primary;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      gap: 16px;
      align-items: center;
      transition: all 0.2s ease;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);

      &:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      }

      .product-image {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;

        .product-img {
          width: 100%;
          height: 100%;
        }

        .product-placeholder {
          width: 100%;
          height: 100%;
          background: $background-secondary;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .product-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;

        .product-name {
          font-size: 16px;
          font-weight: 600;
          color: $label-primary;
          line-height: 1.3;
        }

        .product-number {
          font-size: 13px;
          color: $label-secondary;
        }

        .product-status {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 4px;

          .status-text {
            font-size: 13px;
            color: $system-blue;
            font-weight: 500;
          }
        }
      }
    }
  }

  .load-more-container {
    display: flex;
    justify-content: center;
    padding: 20px;

    .load-more-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px 32px;
      background: rgba(0, 122, 255, 0.08);
      border: 1px solid rgba(0, 122, 255, 0.2);
      border-radius: 25px;
      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 122, 255, 0.1);

      &:active:not(.loading) {
        background: rgba(0, 122, 255, 0.15);
        transform: scale(0.95);
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
      }

      &.loading {
        opacity: 0.7;
        cursor: not-allowed;
      }

      .load-more-text {
        font-size: 15px;
        color: $system-blue;
        font-weight: 600;
        letter-spacing: -0.24px;
      }
    }
  }
}

// 已选物资栏
.selected-items-bar {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 20px);
  left: 20px;
  right: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  background: $background-primary;
  border-radius: 25px;
  padding: 12px 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 122, 255, 0.1);

  .selected-items-left {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 18px;
    background: rgba(0, 122, 255, 0.05);
    transition: all 0.2s ease;
    cursor: pointer;

    &:active {
      background: rgba(0, 122, 255, 0.1);
      transform: scale(0.98);
    }

    .selected-items-text {
      font-size: 14px;
      font-weight: 600;
      color: $label-primary;
    }

    .selected-items-badge {
      background: $system-blue;
      color: white;
      border-radius: 10px;
      padding: 2px 8px;
      font-size: 12px;
      font-weight: 600;
      min-width: 20px;
      text-align: center;
    }
  }

  .next-step-button {
    flex-shrink: 0;
    border-radius: 20px;
    padding: 12px 24px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
    transition: all 0.2s ease;

    &:active {
      transform: scale(0.95);
    }

    &:disabled {
      opacity: 0.5;
      box-shadow: none;
    }
  }
}

// 购物车列表
.cart-list {
  .empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;

    .empty-text {
      font-size: 16px;
      color: $label-secondary;
      margin: 16px 0;
    }
  }

  .cart-item {
    background: $background-primary;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    gap: 12px;

    .cart-item-image {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;

      .item-img {
        width: 100%;
        height: 100%;
      }

      .item-placeholder {
        width: 100%;
        height: 100%;
        background: $background-secondary;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .cart-item-info {
      flex: 1;

      .item-name {
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: $label-primary;
        margin-bottom: 4px;
      }

      .item-sku {
        font-size: 14px;
        color: $label-secondary;
        margin-bottom: 2px;
      }

      .item-number {
        font-size: 12px;
        color: $label-secondary;
        margin-bottom: 6px;
      }

      .item-price {
        display: flex;
        align-items: center;
        gap: 4px;

        .price-label {
          font-size: 12px;
          color: $label-secondary;
        }

        .price-value {
          font-size: 14px;
          font-weight: 600;
          color: $system-blue;
        }
      }
    }

    .cart-item-actions {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;

      .quantity-controls {
        display: flex;
        align-items: center;
        gap: 8px;

        .quantity-btn {
          width: 28px;
          height: 28px;
          border-radius: 14px;
          background: $background-secondary;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          font-weight: 600;
          color: $system-blue;
        }

        .quantity-display {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 4px;
          padding: 6px 12px;
          background: rgba(0, 122, 255, 0.05);
          border-radius: 16px;
          border: 1px solid rgba(0, 122, 255, 0.1);
          min-width: 50px;
          cursor: pointer;
          transition: all 0.2s ease;

          &:hover {
            background: rgba(0, 122, 255, 0.1);
          }

          &:active {
            transform: scale(0.95);
            background: rgba(0, 122, 255, 0.15);
          }

          .quantity-text {
            font-size: 16px;
            font-weight: 600;
            color: $label-primary;
            text-align: center;
          }
        }
      }

      .item-total {
        display: flex;
        align-items: center;
        gap: 4px;

        .total-label {
          font-size: 12px;
          color: $label-secondary;
        }

        .total-value {
          font-size: 16px;
          font-weight: 600;
          color: $system-blue;
        }
      }

      .remove-btn {
        width: 28px;
        height: 28px;
        border-radius: 14px;
        background: rgba(255, 59, 48, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

// 购物车汇总
.cart-summary {
  background: $background-primary;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;

  .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;

    &:last-child {
      margin-bottom: 0;
    }

    .summary-label {
      font-size: 14px;
      color: $label-secondary;
    }

    .summary-value {
      font-size: 16px;
      font-weight: 600;
      color: $label-primary;

      &.total-amount {
        font-size: 18px;
        color: $system-blue;
      }
    }
  }
}

// 已选概览
.selected-summary {
  background: $background-primary;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;

  .summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .summary-title {
      font-size: 16px;
      font-weight: 600;
      color: $label-primary;
    }

    .summary-count {
      font-size: 14px;
      color: $system-blue;
    }
  }

  .summary-items {
    .summary-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid $background-secondary;

      &:last-child {
        border-bottom: none;
      }

      .summary-item-name {
        font-size: 14px;
        font-weight: 600;
        color: $label-primary;
      }

      .summary-item-sku {
        font-size: 12px;
        color: $label-secondary;
      }

      .summary-item-quantity {
        font-size: 14px;
        color: $system-blue;
        font-weight: 600;
      }
    }
  }
}

// 订单表单
.order-form {
  background: $background-primary;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;

  .form-section {
    .form-item {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      .form-label {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: $label-primary;
        margin-bottom: 8px;

        &.required::after {
          content: ' *';
          color: $system-red;
        }
      }
    }
  }
}

// 操作按钮
.step-actions {
  display: flex;
  gap: 12px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 50px);
  position: fixed;
  bottom: 0;
  left: 20px;
  right: 20px;
  background: $background-primary;
  padding: 20px;
  border-top: 1px solid $separator;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100;

  .step-button {
    flex: 1;
    border-radius: 25px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;

    &:active {
      transform: scale(0.95);
    }
  }
}

// 产品详情弹窗
.product-detail-popup {
  .product-detail {
    background: $background-primary;
    border-radius: 16px 16px 0 0;
    max-height: 80vh;
    overflow: hidden;
    padding-bottom: calc(env(safe-area-inset-bottom) + 120px);

    .detail-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid $separator;

      .detail-title {
        font-size: 18px;
        font-weight: 600;
        color: $label-primary;
      }
    }

    .detail-content {
      padding: 20px;
      max-height: 60vh;
      overflow-y: auto;

      .detail-info {
        margin-bottom: 20px;

        .detail-number {
          font-size: 14px;
          color: $label-secondary;
          margin-bottom: 12px;
        }

        .detail-image {
          width: 100%;
          height: 200px;
          border-radius: 12px;
          overflow: hidden;

          .detail-img {
            width: 100%;
            height: 100%;
          }

          .detail-img-placeholder {
            width: 100%;
            height: 100%;
            background: $background-secondary;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;

            .placeholder-text {
              font-size: 14px;
              color: $label-secondary;
              font-weight: 500;
            }
          }
        }
      }

      .detail-skus {
        .skus-title {
          display: block;
          font-size: 16px;
          font-weight: 600;
          color: $label-primary;
          margin-bottom: 16px;
        }

        .skus-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 12px;

          .sku-card {
            background: $background-secondary;
            border-radius: 12px;
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: transform 0.2s ease;

            &:active:not(.disabled) {
              transform: scale(0.98);
            }

            &.disabled {
              opacity: 0.5;
              pointer-events: none;
            }

            .sku-image {
              width: 50px;
              height: 50px;
              border-radius: 8px;
              overflow: hidden;
              flex-shrink: 0;

              .sku-img {
                width: 100%;
                height: 100%;
              }

              .sku-img-placeholder {
                width: 100%;
                height: 100%;
                background: $background-primary;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }

            .sku-info {
              flex: 1;

              .sku-name {
                display: block;
                font-size: 16px;
                font-weight: 600;
                color: $label-primary;
                margin-bottom: 4px;
              }

              .sku-price {
                font-size: 14px;
                color: $system-blue;
                font-weight: 600;
                margin-bottom: 2px;
              }

              .sku-stock {
                font-size: 12px;
                color: $system-green;
              }
            }

            .sku-action {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 40px;
              height: 40px;
              background: rgba(0, 122, 255, 0.1);
              border-radius: 20px;
            }
          }
        }
      }
    }
  }
}

// 已选物资弹窗
.selected-items-popup {
  .selected-items-detail {
    background: $background-primary;
    border-radius: 16px 16px 0 0;
    max-height: 70vh;
    overflow: hidden;
    padding-bottom: calc(env(safe-area-inset-bottom) + 120px);

    .detail-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid $separator;

      .detail-title {
        font-size: 18px;
        font-weight: 600;
        color: $label-primary;
      }
    }

    .selected-items-content {
      padding: 20px;
      max-height: 50vh;
      overflow-y: auto;

      .empty-selected {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;

        .empty-text {
          font-size: 16px;
          color: $label-secondary;
          margin: 16px 0 8px;
        }

        .empty-subtitle {
          font-size: 14px;
          color: $label-secondary;
        }
      }

      .selected-items-list {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .selected-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 12px;
          background: $background-secondary;
          border-radius: 12px;

          .selected-item-image {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0;

            .item-img {
              width: 100%;
              height: 100%;
            }

            .item-placeholder {
              width: 100%;
              height: 100%;
              background: $background-primary;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }

          .selected-item-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 4px;

            .item-name {
              font-size: 15px;
              font-weight: 600;
              color: $label-primary;
            }

            .item-sku {
              font-size: 13px;
              color: $label-secondary;
            }

            .item-quantity {
              font-size: 12px;
              color: $system-blue;
              font-weight: 500;
            }
          }

          .selected-item-price {
            .price-text {
              font-size: 16px;
              font-weight: 600;
              color: $system-blue;
            }
          }
        }
      }
    }
  }
}

// 删除确认弹窗
.delete-confirm-popup {
  .delete-confirm-content {
    background: $background-primary;
    border-radius: 16px;
    padding: 32px 24px;
    min-width: 280px;
    max-width: 320px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

    .delete-confirm-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 24px;

      .delete-confirm-title {
        font-size: 18px;
        font-weight: 600;
        color: $label-primary;
        margin: 16px 0 8px;
        text-align: center;
      }

      .delete-item-info {
        background: rgba(255, 59, 48, 0.05);
        border-radius: 8px;
        padding: 12px 16px;
        margin: 12px 0;
        text-align: center;
        border: 1px solid rgba(255, 59, 48, 0.1);

        .delete-item-name {
          display: block;
          font-size: 15px;
          font-weight: 600;
          color: $label-primary;
          margin-bottom: 4px;
        }

        .delete-item-sku {
          font-size: 13px;
          color: $label-secondary;
        }
      }

      .delete-confirm-text {
        font-size: 14px;
        color: $label-secondary;
        text-align: center;
        line-height: 1.4;
      }
    }

    .delete-confirm-actions {
      display: flex;
      gap: 12px;

      .delete-confirm-button {
        flex: 1;
        border-radius: 12px;
        padding: 14px 20px;
        font-size: 16px;
        font-weight: 600;
        transition: all 0.2s ease;

        &.cancel-button {
          background: $background-secondary;
          color: $label-primary;
          border: 1px solid $separator;

          &:active {
            transform: scale(0.95);
            background: rgba(142, 142, 147, 0.2);
          }
        }

        &.confirm-button {
          background: $system-red;
          color: white;
          border: 1px solid $system-red;

          &:active {
            transform: scale(0.95);
            background: rgba(255, 59, 48, 0.8);
          }
        }
      }
    }
  }
}

// 数量编辑弹窗
.quantity-edit-popup {
  .quantity-edit-content {
    background: $background-primary;
    border-radius: 16px;
    padding: 32px 24px;
    min-width: 280px;
    max-width: 320px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

    .quantity-edit-header {
      text-align: center;
      margin-bottom: 24px;

      .quantity-edit-title {
        display: block;
        font-size: 18px;
        font-weight: 600;
        color: $label-primary;
        margin-bottom: 8px;
      }

      .quantity-edit-subtitle {
        font-size: 14px;
        color: $label-secondary;
        line-height: 1.4;
      }
    }

    .quantity-edit-input-section {
      margin-bottom: 24px;

      .quantity-input {
        width: 100%;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        color: $label-primary;
        margin-bottom: 8px;
        transition: all 0.2s ease;

        &.invalid-quantity {
          border-color: $system-red;
          box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.1);
        }
      }

      .stock-hint {
        text-align: center;

        .stock-text {
          font-size: 12px;
          color: $system-green;
          font-weight: 500;
        }
      }

      .error-hint {
        text-align: center;
        margin-top: 8px;

        .error-text {
          font-size: 12px;
          color: $system-red;
          font-weight: 500;
        }
      }
    }

    .quantity-edit-actions {
      display: flex;
      gap: 12px;

      .quantity-edit-button {
        flex: 1;
        border-radius: 12px;
        padding: 14px 20px;
        font-size: 16px;
        font-weight: 600;
        transition: all 0.2s ease;

        &.cancel-button {
          background: $background-secondary;
          color: $label-primary;
          border: 1px solid $separator;

          &:active {
            transform: scale(0.95);
            background: rgba(142, 142, 147, 0.2);
          }
        }

        &.confirm-button {
          background: $system-blue;
          color: white;
          border: 1px solid $system-blue;

          &:active {
            transform: scale(0.95);
            background: rgba(0, 122, 255, 0.8);
          }

          &:disabled {
            background: $system-gray-light;
            color: rgba(255, 255, 255, 0.6);
            border-color: $system-gray-light;
            cursor: not-allowed;
            transform: none;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 750px) {
  .step-actions {
    flex-direction: column;
  }
}
</style>
